<script>
    function todolist(){
        fetch("/todos")
            .then(response=>response.json())
            .then(data=> {
                document.getElementById('listBox').innerHTML='';
                var Data=data.todos;
                console.log(Data);
                for (var i=0;i<Data.length;i++){
                    if(!Data[i].completed){
                    var opt='<li><input type="checkbox" name="'+Data[i].id+'"onchange="is_finish(this.name)"><span>'+Data[i].title+'</span></li>'
                    document.getElementById('listBox').innerHTML+=opt;
        }
        }
        })
        }
      function zxcv(){
        fetch("/todos")
            .then(response=>response.json())
            .then(data=> {
                document.getElementById('listBox').innerHTML='';
                var Data=data.todos;
                console.log(Data);
                for (var i=0;i<Data.length;i++){

                    var opt='<li><input type="checkbox" name="'+Data[i].id+'"onchange="is_finish(this.name)"><span>'+Data[i].title+'</span></li>'
                    document.getElementById('listBox').innerHTML+=opt;
        }
        })
        }

   function ywc(){
        fetch("/todos")
            .then(response=>response.json())
            .then(data=> {
                document.getElementById('listBox').innerHTML='';
                var Data=data.todos;
                console.log(Data);
                for (var i=0;i<Data.length;i++){
                    if(Data[i].completed){
                    var opt='<li><input type="checkbox" name="'+Data[i].id+'"onchange="is_finish(this.name)"><span>'+Data[i].title+'</span></li>'
                    document.getElementById('listBox').innerHTML+=opt;
        }
        }
        })
        }
   function wwc(){
        fetch("/todos")
            .then(response=>response.json())
            .then(data=> {
                document.getElementById('listBox').innerHTML='';
                var Data=data.todos;
                console.log(Data);
                for (var i=0;i<Data.length;i++){
                    if(!Data[i].completed){
                    var opt='<li><input type="checkbox" name="'+Data[i].id+'"onchange="is_finish(this.name)"><span>'+Data[i].title+'</span></li>'
                    document.getElementById('listBox').innerHTML+=opt;
        }
        }
        })
        }

function submit(){
   var url = '/create';
   var a=document.getElementById('qd').value;
   var data = {title: a};
   fetch(url, {
   method: 'POST',
   body: JSON.stringify(data),
   headers: new Headers({
   'Content-Type': 'application/json'})})
   todolist()
}
function is_finish(id){
    fetch('/mark_completed'+'?id='+id)
    .then(res=>res.json())
    .then(function(data){
        if('title' in data){
            todolist();
    }
    })
}
function deletes(){
    id=document.getElementById('delete').value
    fetch('/del_s'+'?id='+id)
    .then(res=>res.json())
    .then(function(data){
        if('title' in data){
            todolist();
    }
    })
}
</script>
<body onload='todolist()'>
    <div>
    <h1>待办事项清单</h1>
    </div>
    <div>
        <input type="button" value="所有" class="all-task" onclick="zxcv()">
        <input type="button" value="已完成" class="ywc-task" onclick="ywc()">
        <input type="button" value="未完成" class="wwc-task" onclick="wwc()"><br>
    <input type="text" id='qd' placeholder="添加新事项">
    <input type="button" value="+" class="submit-task" onclick="submit()"><br>
        <input type="text" id='delete' placeholder="删除事项">
    <input type="button" value="-" class="del-task" onclick="deletes()">

    </div>
    <div>
        <ul class='text-list' id='listBox'></ul>
    </div>
</body>